<template>
    <div class="secondModule">
        <div id="secondModule" style="width: 100%; height: 100%"></div>
    </div>
</template>
<script>
import { removeStore } from '@/libs/storage';
import { getCountJydb, getCountJyhy } from '@/api/chart/chart';

export default {
    data() {
        return {
            chart: '',
            xData: ['1月', '3月', '5月', '7月', '9月', '11月'],
            yData: [30, 6, 3, 1, 1]
        };
    },
    methods: {
        init() {
            this.chart = echarts.init(document.getElementById('secondModule'));
            let option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        return params[0].name + ': ' + params[0].value;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.xData,
                        // splitLine:{
                        //   show:false
                        // },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        }
                    }
                ],
                legend: {
                    x: 'right',
                    y: 'top'
                },
                yAxis: [
                    {
                        type: 'value',
                        // splitLine:{
                        //   show:false
                        // },
                        name: '人数',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '2024',
                        smooth: true, //平滑
                        type: 'line',
                        symbolSize: 10, //折线拐点大小
                        showSymbol: false,
                        data: this.yData, //纵坐标值
                        itemStyle: {
                            normal: {
                                color: 'rgb(83, 77, 254)', //图例颜色
                                borderWidth: 2,
                                borderColor: 'rgb(83, 77, 254)',
                                lineStyle: { color: 'rgb(83, 77, 254)', width: 1 }
                            }
                        },
                        areaStyle: {
                            normal: {
                                // 渐变填充色（线条下半部分）
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: 'rgb(83, 77, 254)' },
                                    { offset: 1, color: 'rgb(83, 77, 254)' }
                                ])
                            }
                        }
                    }
                ]
            };

            this.chart.setOption(option);
        },
        async getXData() {
            // removeStore("tableName")
            const res = await getCountJydb();
            console.log(res);
            if (res.success) {
                this.xData = res.result.map(e => e.xData + '月');
                this.yData = res.result.map(e => e.yData);
            }
        }
    },
    async mounted() {
        await this.getXData();
        this.init();
    }
};
</script>
<style scoped lang="less">
.secondModule {
    width: 100%;
    height: 100%;
}
</style>
